<template>
  <div class="jindu-container">
    <div class="header">
      <div><i class="el-icon-d-arrow-right"></i>编制村庄按条件筛选</div>
    </div>
    <table-header
      ref="header"
      :filename="name"
      @keychange="keychange"
      @cityChange="cityChange"
      @areaChange="areaChange"
    >
    </table-header>

    <div class="header">
      <div><i class="el-icon-d-arrow-right"></i>进度登记</div>
    </div>
    <div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :default-expand-all="isExpand"
        @expand-change="expand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        v-loading="loading"
      >
        <el-table-column label="序号" width="100" prop="id">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="village" label="村庄名" width="150" />
        <el-table-column label="所属行政区划" width="220">
          　<template slot-scope="scope">
            <span>{{ scope.row.city }}</span
            >-<span>{{ scope.row.country }}</span
            >-<span>{{ scope.row.town }}</span>
          </template>
        </el-table-column>
        <el-table-column label="佐证材料 " width="100">
          <template scope="scope">
            <el-button
              v-permission="['cz:upload']"
              type="primary"
              :disabled="isBlack"
              @click="tijiao(scope.row)"
              size="mini"
              plain
              ><i class="el-icon-upload"></i
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="审核回执" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.cZRMessage" style="color: red">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.cZRMessage['']"
                placement="top"
              >
                <span>{{ scope.row.cZRMessage[""] | ellipsis }}</span>
              </el-tooltip>
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段完成进度">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div @click="openstate(scope.row.progressCZList[item])">
                <el-progress
                  :percentage="scope.row.progressCZList[item] ? 100 : 0"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="completionYear" label="任务年限" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.completionYear">
              {{ scope.row.completionYear }}
            </div>
            <div v-else>暂无限制</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :fileList="fileList"
        :title="title"
      ></right-div>
      <el-dialog
        title="阶段材料上传"
        :visible.sync="dialogVisible"
        width="35%"
        append-to-body
        style="padding: 20px"
      >
        <div style="margin-bottom: 20px">
          请 确 认 您 选 择 的村庄是<span
            style="font-weight: 700; margin-right: 5px; color: red"
          >
            {{ rightNowVillage.city }}-{{ rightNowVillage.country }}-{{
              rightNowVillage.town
            }}-{{ rightNowVillage.village }}</span
          >
        </div>
        <el-select
          v-model="rateName"
          placeholder="请选择阶段名"
          @change="type = 4"
        >
          <el-option
            v-for="item in rateArr"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-upload
          class="upload-demo"
          :http-request="makeSure"
          :show-file-list="false"
          action=""
        >
          <div style="display: flex; align-items: center; margin-top: 20px">
            <el-button
              type="primary"
              icon="el-icon-upload"
              :disabled="type == 1"
              >佐证材料上传</el-button
            >
            <div v-show="type == 2">
              <span>您当前前方上传进度包排队人数为</span
              ><span style="color: red; font-size: 28px; font-weight: 500">{{
                lineNum
              }}</span
              >人
            </div>
            <el-progress
              v-show="type == 3"
              :percentage="progress"
              :color="customColorMethod"
              style="width: 250px"
            ></el-progress>
          </div>
        </el-upload>
      </el-dialog>
    </div>
    <div
      style="
        width: 400px;
        z-index: 9999;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      "
      v-if="isBlack"
    >
      <span
        style="
          display: block;
          padding: 15px;
          background-color: #ccc;
          font-weight: 700;
          font-size: 24px;
          color: red;
        "
        >因未在规定时间内下载吉印最新版本加密狗或因联网授权被取消，您已被加入黑名单。请联系@李一娃0731-85313086</span
      >
    </div>
  </div>
</template>

<script>
import tableHeader from "../components/TableHeader";
import rightDiv from "../components/czrightDiv";
import {
  reviewedczprogresslist,
  uploadczprogressziponereviewed,
} from "@/api/examine.js";
import { getnum, checknum } from "@/api/line.js";
export default {
  components: {
    tableHeader,
    rightDiv,
  },
  mounted() {
    this.AAA = new Map();
    this.getdata();
  },
  data() {
    return {
      rateArr: [
        "基础调研",
        "编制方案",
        "咨询论证",
        "审查审议",
        "规划公示",
        "成果审批",
        "规划公告",
      ],
      rateName: "",
      listquery: {
        pageSize: 10,
        currentPage: 1,
        city: null,
        country: null,
        key: "",
        isMerge: false,
      },
      isExpand: false,
      rightNowVillage: "",
      total: 0,
      isBlack: false,
      progress: 0,
      name: "进度箱查询结果",
      loading: false,
      dialogVisible: false,
      tableData: [],
      AAA: {},
      uploadactive: true,
      rightPanelShow: false,
      type: 1,
      lineNum: null,
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },

  methods: {
    tijiao(row) {
      this.type = 1;
      this.rightNowVillage = row;
      this.dialogVisible = true;
      (this.rateName = ""), (this.uploadactive = true), (this.progress = 0);
    },
    makeSure(data) {
      let file = data.file;
      let name = file.name;
      let fileType = name.split(".")[name.split(".").length - 1];
      if (fileType != "zip") {
        this.$message.error("仅支持zip文件");
        return;
      }
      let fizesizenum = Math.round(file.size / 1024 / 1024);

      if (fizesizenum > 400) {
        this.$message.error(
          "您上传的进度包大小为" +
            fizesizenum +
            "mb,进度包大小不能超过400m!请注意不要将底图底数数据和成果数据上传"
        );
        return;
      }

      let dataform = new FormData();
      dataform.append("file", file);
      dataform.append("filename", name);
      dataform.append("id", this.rightNowVillage.id);
      dataform.append("name", this.rateName);
      this.dataform = dataform;
      getnum(name).then((res) => {
        let last = res.last;
        let num = res.num;
        if (last == 0) {
          this.getjindubao();
        } else {
          this.checkline(num);
        }
      });
    },

    getjindubao() {
      this.type = 3;
      uploadczprogressziponereviewed(this.dataform, (progress) => {
        this.$forceUpdate;
        this.progress = progress;
      })
        .then((v) => {
          if (v.success) {
            this.$notify({
              title: "成功",
              message: "上传进度包成功",
              type: "success",
              offset: 0,
            });
          } else {
          }
          this.getdata();
          this.dialogVisible = false;
          this.isloading2 = false;
        })
        .catch((e) => {
          this.dialogVisible = false;
          this.isloading2 = false;
          this.$alert(e.response.data.message, "上传失败", {
            confirmButtonText: "确定",
            type: "error",
            callback: (action) => {},
          });
        });
    },
    checkline(num) {
      this.type = 2;
      checknum(num).then((res) => {
        let last = res.last;
        this.lineNum = last;
        if (last != 0) {
          setTimeout(() => {
            this.checkline(num);
          }, 10000);
        } else {
          this.getjindubao();
        }
      });
    },
    expand(data, row) {
      data.state = row;
      this.AAA.set(data.id, row);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 2) {
        if (row.children && row.state) {
          return {
            rowspan: row.children.length + 1,
            colspan: 1,
          };
        } else if (row.isChildren) {
          return {
            rowspan: 1,
            colspan: 0,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },

    //进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },

    format(percentage) {
      return `${percentage}%`;
    },
    openstate(data) {
      this.title = data.name;
      this.rightPanelShow = true;
      this.resultList = [];

      let fileList = data.files;
      fileList.forEach((element) => {
        let label = element.substring(element.lastIndexOf("/") + 1);
        let obj = {
          label: label,
          url: element,
        };
        this.resultList.push(obj);
      });
    },
    closeRightPane() {
      this.rightPanelShow = false;
    },
    query(scope) {
      this.$router.push({
        path: "/stage/stageCount",
        query: scope.row,
      });
    },

    keychange(data) {
      this.listquery.key = data;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    cityChange(data) {
      this.listquery.city = data;
      this.listquery.country = null;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    areaChange(data) {
      this.listquery.city = data.city;
      this.listquery.country = data.country;
      this.listquery.currentPage = 1;
      this.getdata();
    },

    async getdata() {
      this.loading = true;
      let res = await reviewedczprogresslist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.isBlack = res.isblack;
      this.tableData.forEach((element) => {
        if (element.children) {
          if (this.AAA.has(element.id)) {
            element.state = this.AAA.get(element.id);
          } else {
            element.state = this.isExpand;
          }
        }
      });
      this.AAA = new Map();
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../public/css/table.scss";

.jindu-container {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}

.downButton {
  display: flex;
  align-items: center;

  .header-button {
    padding: 5px;
    border-radius: 50%;
  }

  .header-tip {
    margin-right: 10px;
    display: flex;
    font-weight: 500;
    align-items: center;
    font-size: 14px;
    width: 400px;
    overflow: hidden;

    .gundong {
      padding-left: 0px;
      font-size: 12px;
      color: #000;
      display: inline-block;
      white-space: nowrap;
      animation: 10s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    @-webkit-keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    i {
      font-size: 18px;
      color: #ee9a00;
    }
  }
}

::v-deep .el-progress-bar__outer {
  height: 15px !important;
}

::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}

.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .el-progress {
    width: 130px;
  }

  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}

.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}

.noclick {
  pointer-events: none !important;
}

.jddengji {
  display: flex;
  justify-content: left;
  padding: 10px;
  align-items: center;

  .tips {
    margin-left: 15px;
    font-size: 14px;

    i {
      color: #cd5555;
      margin-right: 5px;
      font-size: 18px;
    }
  }
}

.demo1 {
  line-height: 52px;
  // display: flex;
  // align-items: center;
}

.warn {
  background-color: #cd5555;
}

.header {
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  margin-right: 5px;
  border-bottom: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;

  i {
    color: #4778c7;
  }
}

.tip1 {
  margin-top: 0;
  line-height: 22px;
  margin-left: 10px;
}

.tip2 {
  color: red;
  line-height: 22px;
  margin-left: 10px;
}

::v-deep .el-dialog__body {
  padding: 20px;
}
</style>
